<template>
  <div id="MovieTag">
     <ul> 
         <!-- router默认是a标签 加了tag就就可以换成li标签 -->
         <router-link to="/movie/city"  tag="li">
        
             北京   <i class="fa fa-caret-down"></i>
         </router-link>
         <router-link to="/movie/now"  tag="li">
             <!-- <i class="fa fa-square"></i> -->
             <p>正在热映</p>
         </router-link>
         <router-link to="/movie/coming"  tag="li">
            <!-- <i class="fa fa-user-circle"></i> -->
            <p>即将上映</p>
         </router-link>
         <router-link to="/movie/search"  tag="li">
            <!-- <i class="fa fa-user-circle"></i> -->
           <i class="fa fa-search"></i>
         </router-link>
     </ul>
     <!-- 写完路由一定要记得写占位符 -->
     <router-view></router-view>
 </div>
</template>

<script>
export default {
  name:"MovieTag",
}
</script>

<style scoped>
   #MovieTag{
      padding-top: 55px;
    
  }
  ul{
  border-bottom: 1px solid #ccc;
  }
   li{
      display: inline-block;
      width: 25%;
      text-align: center;
      height: 40px;
      line-height: 40px;
      color: #666;
      font-weight: bold;
  }
  /* 路由点击的变色 */
  .router-link-active{
       color: #e54847;
       border-bottom: 2px solid #e54847;
  }
  .fa-search{
      font-size: 18px;
       color: #e54847;
  }
</style>